<template>
  <div>
    <!-- <el-button type="primary" @click="addCount">{{count}}</el-button> -->
         <!-- :span-method="objectSpanMethod" -->
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型">
      </el-table-column>
      <el-table-column
        prop="value"
        label="值">
      </el-table-column>
      <el-table-column
        prop="createUser"
        label="创建人">
      </el-table-column>
      <el-table-column
        prop="lastModifyDate"
        label="创建时间">
      </el-table-column>
    </el-table>

    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage1"
      :page-size="10"
      layout="total, prev, pager, next"
      :total="20">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage1:1,
      res1: [
        {
          id: "f7d017bffbdf4b6ea8846c4e26758274",
          code: "02",
          value: "半年报",
          type: "CYCLE_TYPE",
          createUser: "majunjie",
          createDate: "2021-01-22 14:06:01",
          lastModifyUser: "majunjie",
          lastModifyDate: "2021-01-22 14:06:01",
          remark: null,
          loginName: null
        },
        {
          id: "4201ab66270f474994aa5dcc7754ee70",
          code: "02",
          value: "信息中心",
          type: "PROJECT_AREA",
          createUser: "wangning",
          createDate: "2021-01-13 10:10:12",
          lastModifyUser: "wangning",
          lastModifyDate: "2021-01-13 10:10:12",
          remark: null,
          loginName: null
        },
        {
          id: "9f15027e80ae4f359be6185ffd836ca2",
          code: "01",
          value: "月报",
          type: "CYCLE_TYPE",
          createUser: "majunjie",
          createDate: "2021-01-22 14:04:53",
          lastModifyUser: "majunjie",
          lastModifyDate: "2021-01-22 14:04:53",
          remark: "用户报表下拉框",
          loginName: null
        },
        {
          id: "c1a83559879a401ba2d282f504c20dfc",
          code: "03",
          value: "年报",
          type: "CYCLE_TYPE",
          createUser: "majunjie",
          createDate: "2021-01-22 14:06:16",
          lastModifyUser: "majunjie",
          lastModifyDate: "2021-01-22 14:06:16",
          remark: null,
          loginName: null
        },
        {
          id: "7ebe03e27be64a6c89a7f943827c30bb",
          code: "01",
          value: "总署和信息中心",
          type: "PROJECT_SOURCE",
          createUser: "wangning",
          createDate: "2021-01-13 11:16:57",
          lastModifyUser: "wangning",
          lastModifyDate: "2021-01-13 11:16:57",
          remark: null,
          loginName: null
        },
        {
          id: "65e4f15f-dcd7-45af-a021-c51777bae053",
          code: "02",
          value: "地方海关",
          type: "PROJECT_SOURCE",
          createUser: "wangning",
          createDate: "2021-01-13 11:16:57",
          lastModifyUser: "wangning",
          lastModifyDate: "2021-01-13 11:16:57",
          remark: null,
          loginName: null
        },
        {
          id: "cbf411e7-795b-4b55-936a-65b734afb6a6",
          code: "03",
          value: "社会",
          type: "PROJECT_SOURCE",
          createUser: "wangning",
          createDate: "2021-01-13 11:16:57",
          lastModifyUser: "wangning",
          lastModifyDate: "2021-01-13 11:16:57",
          remark: null,
          loginName: null
        },
        {
          id: "0f276d1c817e4723b1092b118559cdf4",
          code: "05",
          value: "内部",
          type: "PROJECT_SOURCE",
          createUser: "wangning",
          createDate: "2021-01-13 09:54:10",
          lastModifyUser: "wangning",
          lastModifyDate: "2021-01-13 09:54:10",
          remark: null,
          loginName: null
        },
        {
          id: "327189207a624b2b8179fc72393ed8a4",
          code: "01",
          value: "备案",
          type: "PROJECT_STATE",
          createUser: "wangning",
          createDate: "2021-01-13 09:55:04",
          lastModifyUser: "wangning",
          lastModifyDate: "2021-01-13 09:55:04",
          remark: null,
          loginName: null
        },
        {
          id: "5a043e910a3f4818860bb0da0582e7f5",
          code: "02",
          value: "立项",
          type: "PROJECT_STATE",
          createUser: "wangning",
          createDate: "2021-01-13 09:55:11",
          lastModifyUser: "wangning",
          lastModifyDate: "2021-01-13 09:55:11",
          remark: null,
          loginName: null
        }
      ],
      res2: [
        {
          id: "f30cdd0a003449f08535017c55050dd9",
          code: "03",
          value: "实施",
          type: "PROJECT_STATE",
          createUser: "wangning",
          createDate: "2021-01-13 09:55:24",
          lastModifyUser: "wangning",
          lastModifyDate: "2021-01-13 09:55:24",
          remark: null,
          loginName: null
        },
        {
          id: "673fd624dfc147f3abe6b2da5835c009",
          code: "04",
          value: "运维",
          type: "PROJECT_STATE",
          createUser: "wangning",
          createDate: "2021-01-13 09:55:30",
          lastModifyUser: "wangning",
          lastModifyDate: "2021-01-13 09:55:30",
          remark: null,
          loginName: null
        },
        {
          id: "9df8724fbabb4c69982d231b48fd15cf",
          code: "05",
          value: "结项",
          type: "PROJECT_STATE",
          createUser: "wangning",
          createDate: "2021-01-13 09:57:21",
          lastModifyUser: "wangning",
          lastModifyDate: "2021-01-13 09:57:21",
          remark: null,
          loginName: null
        },
        {
          id: "aa525079420a4ec59cb2633430d694f2",
          code: "01",
          value: "申请中",
          type: "PROJECT_STATE_REMARKS",
          createUser: "wangning",
          createDate: "2021-01-13 09:58:10",
          lastModifyUser: "wangning",
          lastModifyDate: "2021-01-13 09:58:10",
          remark: null,
          loginName: null
        },
        {
          id: "a695ec0662284115b5a43c193fb7fd3e",
          code: "02",
          value: "已完成",
          type: "PROJECT_STATE_REMARKS",
          createUser: "wangning",
          createDate: "2021-01-13 09:58:19",
          lastModifyUser: "wangning",
          lastModifyDate: "2021-01-13 09:58:19",
          remark: null,
          loginName: null
        },
        {
          id: "2c6898c5ca284315bb665f4978f24f28",
          code: "01",
          value: "通关业务部",
          type: "BUSINESS_SECTOR",
          createUser: "wangning",
          createDate: "2021-01-13 09:59:30",
          lastModifyUser: "wangning",
          lastModifyDate: "2021-01-13 09:59:30",
          remark: null,
          loginName: null
        },
        {
          id: "94d1185fc3764a2789c019d7be117776",
          code: "02",
          value: "集成业务部",
          type: "BUSINESS_SECTOR",
          createUser: "wangning",
          createDate: "2021-01-13 09:59:38",
          lastModifyUser: "wangning",
          lastModifyDate: "2021-01-13 09:59:38",
          remark: null,
          loginName: null
        },
        {
          id: "457253986bc846b8834d3411451d2880",
          code: "03",
          value: "运营管理部",
          type: "BUSINESS_SECTOR",
          createUser: "wangning",
          createDate: "2021-01-13 09:59:53",
          lastModifyUser: "wangning",
          lastModifyDate: "2021-01-13 09:59:53",
          remark: null,
          loginName: null
        },
        {
          id: "07e3fd7d31db42ad88dca5acd6389c2d",
          code: "04",
          value: "研发中心",
          type: "BUSINESS_SECTOR",
          createUser: "wangning",
          createDate: "2021-01-13 10:00:01",
          lastModifyUser: "wangning",
          lastModifyDate: "2021-01-13 10:00:01",
          remark: null,
          loginName: null
        },
        {
          id: "b5ced99c8a8d4f978023f9fa0f760a2b",
          code: "01",
          value: "关务后勤",
          type: "BUSINESS_SYSTEM",
          createUser: "wangning",
          createDate: "2021-01-13 10:02:38",
          lastModifyUser: "wangning",
          lastModifyDate: "2021-01-13 10:02:38",
          remark: null,
          loginName: null
        }
      ],
      tableData:[],
      pos:[]
    };
  },
  created(){
    this.tableData = this.sortData(this.res1);
  },
  mounted(){
    this.oP = document.querySelector(".test");
    // oP.innerHTML = `<p class="red">速度快</p>`
  },
  methods: {
    sortData(data){
      data.sort((a,b)=>{
        return a["type"].localeCompare(b["type"])
      })
      let arr = new Set(data.map(item=>item.type));
      let allArr = data.map(item=>item.type);
      let newArr = [],otherArr=[];
      //这里arr是伪数组 不能用map 可以用foreach遍历
      arr.forEach(item=>{
        let j = 0;
        data.map((msg,i)=>{
          if(item==msg.type){
           j = i;
          }
        })
        newArr.push({
          start:0,
          end:j
        })
         otherArr.push({
          start:allArr.indexOf(item),
          end:allArr.lastIndexOf(item)
        })
      })
      newArr.map((item,i)=>{
        if(i!=0){
          newArr[i].start = newArr[i-1].end+1; 
        }
      })
      console.log(newArr,otherArr)
      //俩种方法获取 排序后的type首次和最后一次出现的位置 推荐 otherArr;
      // this.pos = newArr;
      this.pos = otherArr;
      return data;
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }){
      let yArr = this.pos.map(item=>item.start)
      if(columnIndex==1){
        return{
            colspan:yArr.includes(rowIndex)?1:0,
            rowspan:!yArr.includes(rowIndex)?0:this.pos[yArr.indexOf(rowIndex)].end-this.pos[yArr.indexOf(rowIndex)].start+1
          }
      }
    },
    handleCurrentChange(page){
      setTimeout(()=>{
        this.tableData = this.sortData(this[`res${page}`])
      })
    }
  }
};
</script>
<style lang="less">

</style>